<template>
  <div style="margin-bottom: 10px" class="opera-header">
    <el-button type="success" @click="dialogAddGroup = true">新增任务组</el-button>
  </div>
  <div v-for="(group,name) in data">
    <el-checkbox class="group" v-model="group.status" :indeterminate="group.isIndeterminate"
                 @change="handleCheckAllChange(group)">
      <el-dropdown split-button type="primary">
        {{ group.name }}
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="AddTask(group)">添加任务</el-dropdown-item>
            <el-dropdown-item @click="EditGroup(group)">策略编辑</el-dropdown-item>
            <el-dropdown-item @click="MoveUp(group)">上移</el-dropdown-item>
            <el-dropdown-item @click="MoveDown(group)">下移</el-dropdown-item>
            <el-dropdown-item @click="DeleteGroup(group)">删除</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-checkbox>

    <el-checkbox-group v-model="group.checklist" @change="handleCheckedChange(group)">
      <template v-for="(task,index) in group.tasks">
        {{task}}
        <div id="tasklist">
          <div class="opera">
            <el-checkbox :label="index" v-model="task.status">
              <p>
                <template v-if="group.runway == '并行'">
                  <el-icon><CaretRight /></el-icon>
                </template>
                <template v-else>
                  <el-icon><CaretBottom /></el-icon>
                </template>
                {{ task.name }}</p>
            </el-checkbox>
          </div>
          <div class="child">
            <div class="task_opation">
              <el-icon @click="MoveUpTask(group,task)" class="o">
                <top/>
              </el-icon>
              <el-icon @click="MoveDownTask(group,task)" class="o">
                <Bottom/>
              </el-icon>
              <el-icon @click="DeleteTask(group,task)" class="o">
                <close/>
              </el-icon>
            </div>
          </div>

        </div>
      </template>
    </el-checkbox-group>
  </div>


  <el-dialog v-model="dialogGroup" title="任务组策略" width="25%" :before-close="CloseDia">
    <div>
      <span class="strategy">运行策略</span>
      <el-select v-model="TaskGroup.strategy" placeholder="运行策略">
        <el-option v-for="item in options" :key="item" :label="item" :value="item"/>
      </el-select>
    </div>

    <div style="margin-top: 20px;">
      <span class="runway">运行方式</span>
      <el-select v-model="TaskGroup.runway" placeholder="运行方式">
        <el-option v-for="item in runway_oper" :key="item" :label="item" :value="item"/>
      </el-select>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="CloseDia">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogAddGroup" title="新增任务组" width="25%" :before-close="CloseDia">
    名称：
    <el-input v-model="name"></el-input>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="AddGroup">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogAddTask" title="新增任务" width="25%" :before-close="CloseDia">
    名称：
    <el-select v-model="cur_task" placeholder="请选择任务">
      <el-option v-for="item in task_list" :key="item.name" :label="item.name" :value="item.name"/>
    </el-select>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="SubAddTask">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref,watch} from 'vue'
import {ElMessageBox} from "element-plus";
import {task} from "../js/task"

const dialogGroup = ref(false)
const dialogAddGroup = ref(false)
const dialogAddTask = ref(false)

const cur_task = ref("")
const cur_group = ref({
  tasks:[]
})

const TaskGroup = ref("")
const name = ref("")
const runway_oper = ref(["串行", "并行"])

const props = defineProps(['taskgroups'])
const data =props.taskgroups
data.value = props.taskgroups


const EditGroup = (group) => {
  TaskGroup.value = group
  dialogGroup.value = true
}

const CloseDia = () => {
  dialogGroup.value = false
  dialogAddTask.value = false
}

let page = reactive({"page": 1, "size": 15, "total": 0})
const task_list = ref([])
const ListTask = async () => {
  var res = await task.List(page)
  task_list.value = res.data
}

const AddGroup = () => {
  data.value.push(
      {
        name: name.value,
        status: true,
        strategy: "总是运行",
        runway: "串行",
        tasks:[],
        checklist:[],
      },
  )
  dialogAddGroup.value = false
}

const AddTask = (group) => {
  if (group.tasks == undefined) {
    group.tasks = []
  }
  cur_group.value = group
  dialogAddTask.value = true
  ListTask()
}

const SubAddTask = async () => {
  await cur_group.value.tasks.push(
      {
        name: cur_task.value,
        status: true,
      }
  )
  ChangeGroupStatusByTask(cur_group.value)
}

const handleCheckAllChange = (group) => {
  if (group.isIndeterminate == true) {
    group.status = true
    for (let i in group.tasks) {
      group.tasks[i].status = true
      if (group.checklist.includes(parseInt(i)) == false) {
        group.checklist.push(parseInt(i))
      }
    }
  } else {
    if (group.status == false) {
      for (let i in group.tasks) {
        group.status = false
        group.tasks[i].status = false
        group.checklist = []
      }
    } else {
      for (let i in group.tasks) {
        group.tasks[i].status = true
      }
    }
  }
  ChangeGroupStatusByTask(group)
}

const handleCheckedChange = (group) => {
  ChangeTaskStausByChecklist(group)
}

const ChangeTaskStausByChecklist = async (group) => {
  let check_list = await group['checklist']
  let f = 0
  let t = 0
  console.log(check_list)
  for (let index in group.tasks) {
    if (check_list.includes(parseInt(index)) == true) {
      group.tasks[index].status =  true
      t++
    } else {
      group.tasks[index].status =  false
      f++
    }
  }

  if (group.tasks.length == t) {
    group['status'] = true
    group['isIndeterminate'] = false
  } else if (group.tasks.length == f) {
    group['status'] = false
    group['isIndeterminate'] = false
  } else {
    group['status'] = false
    group['isIndeterminate'] = true
  }
}

const ChangeGroupStatusByTask = async (group) => {
  let check_list = await group['checklist']
  if (check_list.length == 0){
    return
  }
  let f = 0
  let t = 0

  for (let i in group.tasks) {
    if (group.tasks[i].status == true) {
      if (check_list.includes(parseInt(i)) === false){
        check_list.push(parseInt(i))
      }
      t++
    } else {
      f++
    }
  }
  if (group.tasks.length == t) {
    group['status'] = true
    group['isIndeterminate'] = false
  } else if (group.tasks.length == f) {
    group['status'] = false
    group['isIndeterminate'] = false
  } else {
    group['status'] = false
    group['isIndeterminate'] = true
  }
}


onMounted(() => {
  for (var i in data.value) {
    var group = data.value[i]
    var checklist = []
    for (var t in group.tasks) {
      if (group.tasks[t].status == true) {
        checklist.push(parseInt(t))
      }
    }
    group['isIndeterminate'] = false
    data.value[i]['checklist'] = checklist
  }
})


const options = ["总是运行", "失败运行", "成功运行"]

const mobile = (arr, i, num) => {
  arr.splice(i, 0, arr.splice(i + num, 1)[0])
}
const MoveUp = (group) => {
  if (data.value.indexOf(group) != 0) {
    mobile(data.value, data.value.indexOf(group), -1)
  }
}
const MoveDown = (group) => {
  if (data.value.indexOf(group) != data.value.length - 1) {
    mobile(data.value, data.value.indexOf(group), 1)
  }
}

const DeleteGroup = (group) => {
  ElMessageBox.confirm("确认要删除此任务组吗?").then(() => {
    data.value = data.value.filter((item) => item != group)
  })
}

const DeleteTask = (group, task) => {
  if (group.tasks.length == 1) {
    DeleteGroup(group)
  } else {
    group.tasks.splice(task, 1)
  }
}

const MoveUpTask = (group, task) => {
  for (var i in group.tasks) {
    if (group.tasks[i].name == task.name) {
      if (group.tasks.indexOf(task) != 0) {
        mobile(group.tasks, group.tasks.indexOf(task), -1)
      }
    }
  }
}
const MoveDownTask = (group, task) => {
  for (var i in group.tasks) {
    if (group.tasks[i].name == task.name) {
      if (group.tasks.indexOf(task) != (group.tasks.length - 1)) {
        mobile(group.tasks, group.tasks.indexOf(task), 1)
      }
    }
  }
}

</script>
<style scoped>
.group {
  margin-bottom: 8px;
}

.group :deep(.el-checkbox__label) {
  font-size: 16px;
  font-weight: bold;
}

.el-checkbox-group label {
  display: block;
  width: 14px;
  padding-left: 25px;
}

.el-select {
  width: 320px;
}

.strategy, .runway {
  padding-right: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #000a00;
}

:deep(.el-dialog__body) + div {
  margin-bottom: 12px !important;
}

.task_opation {
  display: inline;
  font-size: 12px;
}

#tasklist {
  display: grid;
  grid-template-columns: 5fr 2fr;
  margin-bottom: 4px;
  height: 28px;
  width: 100%;
  padding: 0;
  align-items: center;
}

.task_opation, i {
  font-size: 12px;
}

.child {
  display: none;
}

.o:hover {
  color: green;
  font-weight: bold;
}

#tasklist:hover .child {
  display: block;
  padding-bottom: 8px;
  padding-right: 10px;

  .el-icon {
    padding-right: 4px;
  }
}

.opera-header .el-button {
  padding: 10px;
  margin-right: 0;
  margin-left: 5px;
}
</style>